<template>
  <div @viewappear="viewAppear">
    <navbar theme="light" title="验证码登录"></navbar>
    <div class="login-form">
      <div class="form-row">
        <text class="form-row-icon icon">&#xe704;</text>
        <xinput placeholder="请输入手机号" :value.sync="params.phone" type="tel"
                maxLength="11" class="form-row-control"></xinput>
      </div>
      <div class="form-row">
        <text class="form-row-icon icon">&#xe769;</text>
        <xinput placeholder="输入手机验证码" type="number" maxLength="6" :value.sync="params.verifyCode"
                class="form-row-control"></xinput>
        <text class="form-row-btn activeable" @click="sendMsg">{{cooldown ? '剩余' + cooldown + 's' : '获取验证码'}}</text>
      </div>
      <div class="form-bottom">
        <text :class="['btn-primary','activeable', 'btn','btn-large', validateOk || 'btn-disabled', 'login-btn']" @click="phoneLogin">登 录</text>
      </div>
    </div>
    <div class="footerbar">

    </div>
  </div>
</template>
<script>
require('./include/page-xdom')
let api = require('./include/api')
let urlPath = require('./include/url-path')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let broadcastChannelKeys = require('./include/broadcast-channel-keys')
let BroadcastChannel = require('./include/broadcast-channel')
let loginResultBroadcastChannel = new BroadcastChannel(broadcastChannelKeys.LOGIN_RESULT)
module.exports = {
  mixins: [],
  components: {
    navbar: require('./components/navbar.vue'),
    xinput: require('./components/input.vue')
  },
  data () {
    return {
      logoSrc: urlPath.assets('images/logo_la.png?v=1'),
      hidePwd: true,
      validateOk: false,
      cooldown: 0,
      phoneLoginDoing: false,
      loginStatus: false,
      params: {
        phone: '',
        verifyCode: '',
        'remember-me': true
      }
    }
  },
  beforeDestroy () {
  },
  created () {
    this.$watch('params', () => {
      this.validateOk = this.validate()
    }, {deep: true})
  },
  methods: {
    toggleHidePwd () {
      this.hidePwd = !this.hidePwd
    },
    validate () {
      if (!this.params.phone || this.params.phone.length !== 11) {
        return false
      }
      if (!this.params.verifyCode || this.params.verifyCode.length !== 6) {
        return false
      }
      return true
    },
    viewAppear () {
      if (this.loginStatus) {
        navigator.pop()
      }
    },
    phoneLogin () {
      if (!this.validateOk || this.phoneLoginDoing) {
        return
      }
      this.phoneLoginDoing = true
      api.login.phone(this.params).done(rs => {
        if (rs.data.success) {
          navigator.pop().done(() => {
            loginResultBroadcastChannel.postMessage(rs.data)
          })
        } else {
          modal.alert({message: rs.data.errMsg}, () => {

          })
        }
      }).always(rs => {
        this.phoneLoginDoing = false
      })
    },
    sendMsg () {
      if (this.cooldown > 0) {
        return
      }
      if (!this.params.phone || this.params.phone.length !== 11) {
        modal.alert({message: '请先输入正确的手机号'})
        return false
      }
      api.sms.phoneLogin({
        phone: this.params.phone,
        'remember-me': true
      }).done(rs => {
        let data = rs.data
        if (data.success) {
          this.cooldown = data.cooldown
          this.cooldownCount()
        } else {
          if (data.cooldown) {
            this.cooldown = data.cooldown
            this.cooldownCount()
          } else {
            modal.alert({message: '短信验证码发送失败'})
          }
        }
      })
    },
    cooldownCount () {
      setTimeout(() => {
        this.cooldown--
        if (this.cooldown > 0) {
          this.cooldownCount()
        }
      }, 1000)
    }
  }
}
</script>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  @import "./sass/form";
  @import "./sass/utilities";

  .container {
    background-color: #FFFFFF;
  }

  .agreement {
    flex-direction: row;
    &-txt {
      font-size: 28px;
      color: $color-muted;
      &-link {
        color: $color-warning;
      }
    }
  }

  .footerbar {
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 50px 0;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    &-icon {
      font-size: 110px;
      &-weixin {
        color: #77bb46;
      }
    }
  }

  .form-row-text {
    margin-top: 30px;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 0 15px;
  }

  .sms-switch-btn {
    color: $color-info;
    font-size: 32px;
  }

  .phoneLogin-new-btn {
    color: $color-info;
    font-size: 32px;
  }

  .logo {
    width: 154px;
    height: 154px;
    border-radius: 154px;
    &-wrapper {
      justify-content: center;
      align-items: center;
      height: 180px;
    }
  }

  .login-form {
    padding: 0 40px;
    margin-top: 60px;
  }

  .login-wrap {

  }

  .login-btn {
    flex: 1;
  }
</style>
